<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{.Example.Title}} - Learn Pascal by Example</title>
    <link rel="stylesheet" href="/static/css/style.css">
    <!-- CodeMirror CSS -->
    <link rel="stylesheet" href="/static/js/codemirror/5.65.2/codemirror.min.css">
    <style>
        /* 侧边栏样式 */
        .sidebar {
            position: fixed;
            left: 0;
            top: 0;
            height: 100%;
            width: 300px;
            background-color: #f8f9fa;
            border-right: 1px solid #dee2e6;
            overflow-y: auto;
            z-index: 1000;
            transition: transform 0.3s ease;
        }
        
        .sidebar.collapsed {
            transform: translateX(-300px);
        }
        
        .sidebar-header {
            padding: 1rem;
            background-color: #375eab;
            color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .toggle-btn {
            background: none;
            border: none;
            color: white;
            font-size: 1.2rem;
            cursor: pointer;
        }
        
        .sidebar-content {
            padding: 1rem;
        }
        
        .sidebar ul {
            list-style: none;
            padding: 0;
        }
        
        .sidebar li {
            margin-bottom: 0.5rem;
        }
        
        .sidebar a {
            text-decoration: none;
            color: #333;
            display: block;
            padding: 0.5rem;
            border-radius: 4px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .sidebar a:hover {
            background-color: #e9ecef;
        }
        
        .sidebar a.active {
            background-color: #375eab;
            color: white;
        }
        
        /* 可调整宽度的手柄 */
        .resize-handle {
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            width: 5px;
            background-color: #375eab;
            cursor: col-resize;
            z-index: 1001;
        }
        
        /* 主内容区域 */
        .main-content {
            margin-left: 300px;
            transition: margin-left 0.3s ease;
        }
        
        .main-content.expanded {
            margin-left: 0;
        }
        
        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 2rem;
        }
        
        /* 代码区域样式 */
        .CodeMirror {
            height: auto;
            border-radius: 4px;
            font-size: 1rem; /* 增大字体 */
        }
        
        .CodeMirror-scroll {
            overflow-x: auto;
        }
        
        .code-header {
            margin-top: 1rem;
            font-size: 1.2rem; /* 增大标题字体 */
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .code-section pre {
            background-color: #f8f8f8;
            padding: 1rem;
            border-radius: 4px;
            overflow-x: auto;
            font-size: 1rem; /* 增大字体 */
        }
        
        /* 复制按钮样式 */
        .copy-btn {
            background-color: #375eab;
            color: white;
            border: none;
            padding: 0.3rem 0.6rem;
            border-radius: 4px;
            cursor: pointer;
            font-size: 0.9rem;
            transition: background-color 0.2s;
        }
        
        .copy-btn:hover {
            background-color: #2d4bac;
        }
        
        .copy-btn.copied {
            background-color: #28a745;
        }
        
        /* 底部导航样式 */
        .navigation {
            display: flex;
            justify-content: space-between;
            margin-top: 2rem;
            padding-top: 1rem;
            border-top: 1px solid #eee;
        }
        
        .nav-link {
            text-decoration: none;
            color: #375eab;
            padding: 0.5rem 1rem;
            border-radius: 4px;
            border: 1px solid #dee2e6;
            transition: all 0.2s;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 45%;
        }
        
        .nav-link:hover {
            background-color: #f8f9fa;
            text-decoration: none;
        }
        
        .nav-link.disabled {
            color: #6c757d;
            cursor: not-allowed;
            background-color: #f8f9fa;
        }
        
        .nav-link.disabled:hover {
            background-color: #f8f9fa;
        }
        
        /* 浮动展开按钮 */
        .sidebar-toggle-float {
            position: fixed;
            left: 10px;
            top: 10px;
            z-index: 999;
            background-color: #375eab;
            color: white;
            border: none;
            border-radius: 4px;
            width: 40px;
            height: 40px;
            font-size: 1.2rem;
            cursor: pointer;
            display: none;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        }
        
        .sidebar-toggle-float.show {
            display: flex;
        }
        
        /* 重置按钮 */
        .reset-btn {
            background-color: #6c757d;
            color: white;
            border: none;
            padding: 0.3rem 0.6rem;
            border-radius: 4px;
            cursor: pointer;
            font-size: 0.9rem;
            margin-left: 0.5rem;
            transition: background-color 0.2s;
        }
        
        .reset-btn:hover {
            background-color: #5a6268;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .sidebar {
                transform: translateX(-300px);
            }
            
            .sidebar.collapsed {
                transform: translateX(0);
            }
            
            .main-content {
                margin-left: 0;
            }
            
            .main-content.expanded {
                margin-left: 300px;
            }
        }
        
        /* 在桌面端，当侧边栏收起时显示浮动按钮 */
        @media (min-width: 769px) {
            .sidebar.collapsed ~ .sidebar-toggle-float {
                display: flex;
            }
        }
        
        /* 在移动端，始终显示浮动按钮（除非侧边栏展开） */
        @media (max-width: 768px) {
            .sidebar-toggle-float {
                display: flex;
            }
            
            .sidebar:not(.collapsed) ~ .sidebar-toggle-float {
                display: none;
            }
        }
        
        /* 增加代码区域宽度 */
        .content-wrapper {
            display: flex;
            flex-wrap: wrap;
            gap: 2rem;
            margin-top: 2rem;
        }
        
        .explanation {
            flex: 1.2; /* 增加说明文档区域的宽度比例 */
            min-width: 350px; /* 增加最小宽度 */
        }
        
        .code-section {
            flex: 1.5;
            min-width: 350px;
        }
    </style>
</head>
<body>
    <!-- 侧边栏导航 -->
    <div class="sidebar" id="sidebar">
        <div class="sidebar-header">
            <span>示例目录</span>
            <div>
                <button class="reset-btn" id="resetSidebar" title="重置侧边栏设置">↺</button>
                <button class="toggle-btn" id="toggleSidebar" title="切换侧边栏">☰</button>
            </div>
        </div>
        <div class="resize-handle" id="resizeHandle"></div>
        <div class="sidebar-content">
            <ul>
                {{range .AllExamples}}
                <li>
                    <a href="/{{.Directory}}/" class="{{if eq .ID $.Example.ID}}active{{end}}" title="{{.Title}} ({{.ChineseTitle}})">
                        {{.ID}}. {{.Title}} ({{.ChineseTitle}})
                    </a>
                </li>
                {{end}}
            </ul>
        </div>
    </div>
    
    <!-- 浮动展开按钮 -->
    <button class="sidebar-toggle-float" id="floatToggle" title="展开侧边栏">☰</button>
    
    <!-- 主内容区域 -->
    <div class="main-content" id="mainContent">
        <div class="header">
            <div class="container">
                <h1><a href="/">Learn Pascal by Example</a></h1>
            </div>
        </div>
        
        <div class="container">
            <h2>{{.Example.Title}} ({{.Example.ChineseTitle}})</h2>
            
            <div class="content-wrapper">
                <div class="explanation">
                    <h3>说明文档</h3>
                    <div class="code-block">
                        {{.DescriptionContent}}
                    </div>
                </div>
                
                <div class="code-section">
                    <div class="code-header">
                        <span>示例代码</span>
                        <button class="copy-btn" id="copyCodeBtn">复制</button>
                    </div>
                    <div class="code-block">
                        <textarea id="code" style="display:none;">{{.ExampleContent}}</textarea>
                        <div id="code-editor"></div>
                    </div>
                    
                    <div class="code-header">预期输出</div>
                    <div class="output-block">
                        <pre id="outputContent">{{.OutputContent}}</pre>
                    </div>
                </div>
            </div>
            
            <h3>文件列表</h3>
            <ul class="file-list">
                {{range .Files}}
                <li class="file">
                    <span class="file-icon">📄</span> 
                    {{.Name}} ({{.Size}} 字节, {{.Type}})
                </li>
                {{end}}
            </ul>
            
            <!-- 底部导航 -->
            <div class="navigation">
                {{if .PrevExample}}
                <a href="/{{.PrevExample.Directory}}/" class="nav-link" title="{{.PrevExample.Title}} ({{.PrevExample.ChineseTitle}})">
                    ← 上一个: {{.PrevExample.Title}}
                </a>
                {{else}}
                <a href="#" class="nav-link disabled">← 上一个: 没有了</a>
                {{end}}
                
                {{if .NextExample}}
                <a href="/{{.NextExample.Directory}}/" class="nav-link" title="{{.NextExample.Title}} ({{.NextExample.ChineseTitle}})">
                    下一个: {{.NextExample.Title}} →
                </a>
                {{else}}
                <a href="#" class="nav-link disabled">下一个: 没有了 →</a>
                {{end}}
            </div>
        </div>
        
        <div class="footer">
            <p><a href="/">返回首页</a></p>
        </div>
    </div>

    <!-- CodeMirror JavaScript -->
    <script src="/static/js/codemirror/5.65.2/codemirror.min.js"></script>
    <script src="/static/js/codemirror/5.65.2/mode/pascal/pascal.min.js"></script>
    <script>
        // 侧边栏功能
        document.addEventListener('DOMContentLoaded', function() {
            const sidebar = document.getElementById('sidebar');
            const mainContent = document.getElementById('mainContent');
            const toggleBtn = document.getElementById('toggleSidebar');
            const floatToggle = document.getElementById('floatToggle');
            const resetBtn = document.getElementById('resetSidebar');
            const resizeHandle = document.getElementById('resizeHandle');
            const copyBtn = document.getElementById('copyCodeBtn');
            const codeTextarea = document.getElementById('code');
            
            // 从localStorage加载设置
            function loadSidebarSettings() {
                try {
                    const settings = JSON.parse(localStorage.getItem('learn-pascal-by-example') || '{}');
                    
                    // 恢复侧边栏宽度
                    if (settings.sidebarWidth) {
                        sidebar.style.width = settings.sidebarWidth + 'px';
                        mainContent.style.marginLeft = settings.sidebarWidth + 'px';
                    }
                    
                    // 恢复侧边栏展开/收起状态
                    if (settings.sidebarCollapsed) {
                        sidebar.classList.add('collapsed');
                        mainContent.classList.add('expanded');
                    }
                } catch (e) {
                    console.error('Failed to load sidebar settings:', e);
                }
            }
            
            // 保存设置到localStorage
            function saveSidebarSettings() {
                try {
                    const settings = {
                        sidebarWidth: parseInt(sidebar.style.width) || 300,
                        sidebarCollapsed: sidebar.classList.contains('collapsed')
                    };
                    localStorage.setItem('learn-pascal-by-example', JSON.stringify(settings));
                } catch (e) {
                    console.error('Failed to save sidebar settings:', e);
                }
            }
            
            // 重置设置
            function resetSidebarSettings() {
                localStorage.removeItem('learn-pascal-by-example');
                sidebar.style.width = '300px';
                mainContent.style.marginLeft = '300px';
                sidebar.classList.remove('collapsed');
                mainContent.classList.remove('expanded');
                saveSidebarSettings();
            }
            
            // 切换侧边栏显示状态
            function toggleSidebar() {
                sidebar.classList.toggle('collapsed');
                mainContent.classList.toggle('expanded');
                saveSidebarSettings();
            }
            
            // 复制代码功能
            function copyCode() {
                const codeText = codeTextarea.value;
                const textArea = document.createElement('textarea');
                textArea.value = codeText;
                document.body.appendChild(textArea);
                textArea.select();
                document.execCommand('copy');
                document.body.removeChild(textArea);
                
                // 更新按钮状态
                const originalText = copyBtn.textContent;
                copyBtn.textContent = '已复制!';
                copyBtn.classList.add('copied');
                
                setTimeout(function() {
                    copyBtn.textContent = originalText;
                    copyBtn.classList.remove('copied');
                }, 2000);
            }
            
            // 绑定事件
            toggleBtn.addEventListener('click', toggleSidebar);
            floatToggle.addEventListener('click', toggleSidebar);
            resetBtn.addEventListener('click', resetSidebarSettings);
            copyBtn.addEventListener('click', copyCode);
            
            // 可调整宽度功能
            let isResizing = false;
            
            resizeHandle.addEventListener('mousedown', function(e) {
                isResizing = true;
                document.body.style.cursor = 'col-resize';
                e.preventDefault();
            });
            
            document.addEventListener('mousemove', function(e) {
                if (!isResizing) return;
                
                const newWidth = e.clientX;
                if (newWidth > 200 && newWidth < 600) { // 限制最小200px，最大600px
                    sidebar.style.width = newWidth + 'px';
                    mainContent.style.marginLeft = newWidth + 'px';
                }
            });
            
            document.addEventListener('mouseup', function() {
                if (isResizing) {
                    isResizing = false;
                    document.body.style.cursor = '';
                    saveSidebarSettings();
                }
            });
            
            // 初始化加载设置
            loadSidebarSettings();
            
            // 创建CodeMirror实例
            var codeContent = codeTextarea.value;
            var editor = CodeMirror(document.getElementById('code-editor'), {
                value: codeContent,
                mode: "pascal",
                theme: "default",
                lineNumbers: true,
                readOnly: true,
                viewportMargin: Infinity,
                fontSize: "16px"
            });
        });
    </script>
</body>
</html>